<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../style/api.css" />
    <link rel="stylesheet" type="text/css" href="../style/mui.min.css" />
    <style>
        header {
            position: relative;
            height: 15rem;
            width: 100%;
            text-align: center;
            background-color: #3949AB;
        }

        .person {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5rem;
            height: 5rem;
            padding: 0.3rem;
            overflow: hidden;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background-color: #fff;
        }

        .person img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .username {
            color: #fff;
            font-weight: bold;
            font-size: 1.2rem;
            margin-top: 11rem;
        }

        .myfunction {
            width: 100%;
            padding: 0.5rem;
        }

        .mytitle {
            color: #3949AB;
            margin: 1rem 0;
        }

        .myfunction .box {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
        }

        .box div {
            position: relative;
            width: 47%;
            padding: 0.5rem;
            background-color: #fff;
            border-radius: 0.4rem;
            margin-bottom: 1rem;
        }

        .box div p:nth-child(1) {
            color: #3949AB;
            font-size: 1.1rem;
            font-weight: bold;
            margin-bottom: 0.4rem;
        }

        .box div p:nth-child(2) {
            color: #999;
            font-size: 0.8rem;
        }

        .box div img {
            position: absolute;
            bottom: 0.5rem;
            right: 0.5rem;
            width: 2rem;
            height: 2rem;
        }

        .logout {
            color: #fff;
            width: 95%;
            display: none;
            text-align: center;
            margin: 0.5rem auto;
            padding: 1rem;
            border-radius: 0.4rem;
            background-color: #3949AB;
        }
    </style>
</head>

<body>
    <header>
        <div class="person">
            <img src="../img/icons/user.png" alt="">
        </div>
        <span class="username"></span>
    </header>
    <div class="myfunction">
        <span class="mytitle">我的常用</span>
        <div class="box">
            <div id="personinfo">
                <p>资料</p>
                <p>修改个人资料</p>
                <img src="../img/icons/personinfo.png" alt="">
            </div>
            <div id="uppwd">
                <p>密码</p>
                <p>更改账号密码</p>
                <img src="../img/icons/uppwd.png" alt="">
            </div>
            <div id="clear">
                <p>缓存</p>
                <p>清理应用缓存</p>
                <img src="../img/icons/clear.png" alt="">
            </div>
            <div id="feedback">
                <p>反馈</p>
                <p>遇到问题请反馈</p>
                <img src="../img/icons/feedback.png" alt="">
            </div>
        </div>
        <div class="logout">退出</div>
    </div>
</body>
<script type="text/javascript" src="../js/api.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.addEventListener({
            name: 'viewappear'
        }, function(ret, err) {
            judgeIsLogin();
        });
        judgeIsLogin();
    };

    function judgeIsLogin() {
        if ($api.getStorage('username')) {
            $('.username').text($api.getStorage('username'));
            $('.logout').show();
        } else {
            $('.logout').hide();
            $('.username').text('未登录，点击去登录');
            $('.username').click(function() {
                api.openWin({
                    name: 'login',
                    url: './btb-login.html',
                });
            })
        }
    }

    $('#personinfo').click(function() {
        if ($api.getStorage('username')) {
            api.openWin({
                name: 'personinfo',
                url: './btb-personinfo.html',
            });
        } else {
            api.openWin({
                name: 'login',
                url: './btb-login.html',
            });
        }
    })

    $('#uppwd').click(function() {
        if ($api.getStorage('username')) {
            api.openWin({
                name: 'uppwd',
                url: './btb-uppwd.html',
            });
        } else {
            api.openWin({
                name: 'login',
                url: './btb-login.html',
            });
        }
    })

    $('#clear').click(function() {
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '清理中...',
            text: '稍候',
            modal: false
        });
        setTimeout(function() {
            api.hideProgress();
            api.toast({
                msg: '已清除',
                duration: 2000,
                location: 'bottom'
            });
        }, 1500)
    })

    $('#feedback').click(function() {
        if ($api.getStorage('username')) {
            api.openWin({
                name: 'feedback',
                url: './btb-feedback.html',
            });
        } else {
            api.openWin({
                name: 'login',
                url: './btb-login.html',
            });
        }
    })

    $('.logout').click(function() {
        if ($api.getStorage('username')) {
            var btnArray = ['取消', '确定'];
            mui.confirm('确认退出本次登录？', '提示', btnArray, function(e) {
                if (e.index == 1) {
                    $api.clearStorage();
                    $('.username').text('未登录，点击去登录');
                    window.location.reload();
                } else {
                    api.toast({
                        msg: '取消了操作',
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            })
        } else {
            api.openWin({
                name: 'login',
                url: './btb-login.html',
            });
        }
    })
</script>

</html>
